<!--
 * @Author: chenxunan
 * @Date: 2019-11-18 
 * @LastEditors: 
 * @LastEditTime: 
 * @Description: 目前支持左右滑动
 -->
<template>
    <div 
      class="grimm-image-preview" 
      ref="image-preview-slide"
    >
      <div 
        class="grimm-image-preview-main"
        ref="image-preview-sliderGroup"
      >
        <div
          v-for="(url, index) in images"
          :key="index"
          class="slider-item"
        >  
          <img :src="url" alt="" @click="triggerStatus">
        </div>
      </div>
      <span class="grimm-image-preview-index" v-if="showIndex">
        {{currentPageIndex + 1}}/{{images.length}}
      </span>
    </div>
</template>

<script>
import BScroll from 'better-scroll';
const COMPONENT_NAME = 'grimm-image-preview';
export default {
  name: COMPONENT_NAME,
  props: {
    images: {
      type: Array,
      default: [],
    },
    startPosition: {
      type: Number,
      default: 0,
    },
    showIndex: {
      type: Boolean,
      default: true,
    },
    interval: { // 自动轮播间隔
      type: Number,
      default: 3000,
    },
    autoPlay: {
      type: Boolean,
      default: false,
    },
    loop: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      currentPageIndex: this.startPosition,
    }
  },
  methods: {
    triggerStatus() {
      this.$emit('close');
    },
    _setSliderWidth() {
      // 获取整个列表有多少个元素
      this.children = this.$refs['image-preview-sliderGroup'].children
      let width = 0 // 总的宽度
      // slider 父元素的宽度
      let slideWidth = this.$refs['image-preview-slide'].clientWidth
      for (let i = 0; i < this.children.length; i++) {
        // 获取每个子元素
        let child = this.children[i];
        child.style.width = slideWidth + 'px';
        // console.log(child.style.width);
        width += slideWidth;
      }
      // 如果slide是需要循环的话，slide会在左右两侧copy两个子元素从而保证循环切换
      if (this.loop) {
        width += 2 * slideWidth;
        // console.log(width);
      }
      this.$refs['image-preview-sliderGroup'].style.width = width + 'px';
    },
    _initSlider() { // 初始化slide
      this.slider = new BScroll(this.$refs['image-preview-slide'], {
        scrollX: true, // 横向滚动
        scrollY: false, // 不允许纵向滚动
        momentum: false, // 是否开启动量动画，关闭可以提升效率
        snap: {
          loop: this.loop,
          threshold: 0.3,
          speed: 400,
        },
      })
      if (this.currentPageIndex) {
        this.slider.goToPage(this.currentPageIndex, 0, 0)
      }
      this.slider.on('scrollEnd', () => {
        let pageIndex = this.slider.getCurrentPage().pageX
        // console.log(pageIndex, '111')
        // 做个判断防止多次触发事件
        if (pageIndex !== this.currentPageIndex) {
          this.currentPageIndex = pageIndex;
          this.$emit('change', pageIndex);
          if (this.autoPlay) {
            this._play();
          }
        }
      })
      this.slider.on('beforeScrollStart', () => {
        if (this.autoPlay) {
          clearTimeout(this.timer)
        }
      })
    },
    _play() {
    //   let pageIndex = this.currentPageIndex + 1
    //   console.log(pageIndex, '222');
      this.timer = setTimeout(() => {
        // console.log(pageIndex, '333');
        // this.slider.goToPage(pageIndex, 0, 400)
        this.slider.next();
      }, this.interval)
    }
  },
  mounted() {
    setTimeout(() => {
      this._setSliderWidth();
      this._initSlider();
      if (this.autoPlay) {
        this._play();
      }
    }, 20)
  }
}
</script>

<style>

</style>